<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-08-28 11:38:43
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-09-01 14:16:56
 * @FilePath: \cdj-jyt_school-vue\src\views\residues\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <div class="mainor_te">
          <!-- <el-button @click="addAction" class="marginLeft10" type="primary">新增</el-button> -->
        </div>
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="80px"
        >
          <el-form-item label="供应商名称" prop="company_name">
            <el-input
              clearable
              v-model.trim="form.company_name"
              placeholder="供应商名称"
              class="wid220"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="预警状态" prop="state">
            <el-select
              v-model="form.state"
              placeholder="请选择预警状态"
              clearable
            >
              <el-option
                v-for="item in warningList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="商品名称" prop="goods_name">
            <el-input
              clearable
              v-model.trim="form.goods_name"
              placeholder="商品名称"
              class="wid220"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="reset marginLeft10"
              type="primary"
              @click="reset()"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="getArticleList"
              :loading="listLoading"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="main_table" style="min-height: 590px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
        >
          <el-table-column type="index" />
          <el-table-column label="供应商名称" width="130" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.company_name }}</template>
          </el-table-column>
          <el-table-column label="商品名称" width="130" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.goods_name }}</template>
          </el-table-column>
          <!-- <el-table-column label="检测报告" width="250" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="linkSpan" @click="openLink(scope.row.report)">{{ scope.row.report }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="检测时间">
            <template slot-scope="scope">{{ scope.row.time }}</template>
          </el-table-column>
          <!-- <el-table-column label="推送状态">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.state == 1">未推送</el-tag>
              <el-tag type="success" v-else-if="scope.row.state == 0"
                >已推送</el-tag
              >
            </template>
          </el-table-column> -->
          <el-table-column label="检测用户">
            <template slot-scope="scope">
              <span class="showSpan">{{ scope.row.testing_user }}</span>
            </template>
          </el-table-column>
          <el-table-column label="检测项目">
            <template slot-scope="scope">
              <span class="showSpan">{{ scope.row.project_name }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                @click="examine(scope.row)"
                type="text"
                size="mini"
                class="handle_btn"
                >发布预警</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="main_page boxdq">
        <div></div>
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[10,20, 30, 50, 100]"
            :page-size="current.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>

    <el-dialog title="检测报告" :visible.sync="linkVisible" width="60%">
      <iframe width="100%" height="500" :src="linkUrl"></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button @click="linkVisible = false">取 消</el-button>
        <el-button type="primary" @click="linkVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="发布预警" :visible.sync="releaseVisible" width="70%">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="档口:" prop="supplierRadio">
          <el-radio-group v-model="ruleForm.supplierRadio">
            <el-radio :label="0">全选</el-radio>
            <el-radio :label="1">选择个别档口不发送预警</el-radio>
            <el-radio :label="2">选择个别档口发送预警</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="选择档口:"
          prop="supplierId"
          v-if="ruleForm.supplierRadio == 1 || ruleForm.supplierRadio == 2"
        >
          <el-select
            v-model="ruleForm.supplierId"
            multiple
            :placeholder="
              ruleForm.supplierRadio == 1
                ? '选择个别档口不发送预警'
                : '选择个别档口发送预警'
            "
          >
            <el-option label="老王档口" value="0"></el-option>
            <el-option label="老李档口" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择短信模板" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择短信模板">
            <el-option label="模板1" value="0"></el-option>
            <el-option label="模板2" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item
          label="模板预览:"
          prop="supplierRadio"
          v-if="ruleForm.region == 1"
        >
          <span style="color: red"
            >中控系统发生预警,系统检测商品超标且呈上升趋势,检测值:XX,时间:XX,请及时处理,谢谢</span
          >
        </el-form-item>
        <el-form-item
          label="模板预览:"
          prop="supplierRadio"
          v-if="ruleForm.region == 0"
        >
          <span style="color: red"
            >温馨提示:系统设置的商品检测数据高于正常值,为了食品安全,请及时处理,时间:xx,谢谢</span
          >
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="releaseVisible = false">取 消</el-button>
        <el-button type="primary" @click="releaseVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadPath } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { Debounce } from "@/utils/index";
import { getList, putYuJing } from "@/api/residues";
export default {
  name: "residues",
  data() {
    return {
      // 预警状态
      warningList: [
        {
          value: "0",
          label: "已推送",
        },
        {
          value: "1",
          label: "未推送",
        },
      ],
      // 搜索条件
      form: {
        // 供应商名称
        company_name: null,
        // 商品名称
        goods_name: null,
      },
      // 加载功能
      listLoading: false,
      // 列表字段
      list: [],
      // 检测报告模态框
      linkVisible: false,
      // 检测报告链接
      linkUrl: null,

      // 发布预警模态框
      releaseVisible: false,
      uploadPath,
      ruleForm: {
        supplierRadio: null,
        supplierId: [],
      },

      // 分页
      current: {
        page: 1,
        limit: 10,
      },
      totalCount: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      let data = {
        page: this.current.page,
        page_size: this.current.limit,
        goods_name: this.form.goods_name,
        company_name: this.form.company_name,
      };
      let query = this.getPackage(data);
      getList(query).then((res) => {
        if (res.errcode == 0) {
          this.list = res.data.list;
          this.totalCount = res.data.count;
          this.listLoading = false;
        } else {
          this.$message.error(res.errmsg);
          this.listLoading = false;
        }
      });
    },

    //  重置
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.getList();
    },

    // 切换分页大小
    changeLimit(e) {
      this.current.limit = e;
      this.getList();
    },
    // 切换分页
    changePage(e) {
      this.current.page = e;
      this.getList();
    },
    getArticleList() {
      this.current.page = 1;
      this.getList();
    },
    // 发布预警
    examine: Debounce(function (row) {
      // this.releaseVisible = true
      this.$confirm("确定再次发送预警, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            goods_spu_id: row.good_spu_id,
            time: row.time,
            project_id: row.project_id,
            company_id: row.company_id,
          };
          let query = this.getPackage(data);
          putYuJing(query).then((res) => {
            if (res.errcode == 0) {
              this.$message.success(res.errmsg);
              this.getList();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }),

    // 打开链接预览图片
    openLink(link) {
      this.linkUrl = null;
      this.linkUrl = link;
      this.linkVisible = true;
    },

    // 封装请求前函数
    getPackage(data) {
      return Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.maincl {
  .handle_btn {
    padding: 0;
    border: 0;
  }

  .mainor_form form {
    width: 100%;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }

  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }

      &.hover-row > td {
        background: none !important;
      }

      .current-row > td {
        background: none !important;
      }
    }
  }

  /deep/.main_table .el-table--small td .cell {
    height: auto !important;
  }

  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }

  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }

  /deep/.el-table tr.expanded + tr {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr > td {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .mainex_ta {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .mainex_ta th,
  /deep/.el-table tr.expanded + tr .mainex_ta tr {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr:hover {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr:hover > td {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .el-table tr:hover {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
    background: #fafafa !important;
  }

  /deep/.el-table .cell {
    display: flex;
    align-items: center;
  }

  /deep/.boxdq {
    justify-content: flex-end;
  }
}

.exptitle {
  padding: 10px 0px;
}

.linkSpan {
  text-decoration: underline;
  color: rgb(0, 255, 21);
  cursor: pointer;
}

.showSpan {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5; //控制显示几行
  -webkit-box-orient: vertical; //webbox方向
  white-space: wrap;
}
</style>